<template>
  <el-drawer :visible.sync="showDetail" title="登记详情" size="60%">
    <div class="app-container" v-if="disposalData">
      <el-tabs v-model="activeName">
        <el-tab-pane label="处置信息">
          <el-form :model="disposalData.disposalInfo" ref="form" label-width="180px">
            <el-form-item label="处置类型">
              <dict-tag :options="dict.type.deal_type" :value="disposalData.disposalInfo.disposalStat"/>
            </el-form-item>
            <customize-disposal-form :form="disposalData.disposalInfo" :span="12"/>
            <div class="mt10" style="text-align: center">
              <el-button size="mini" type="primary" @click="updateInfo">保存</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="登记财物">
          <div class="mt10">
            <el-button size="mini" type="primary" @click="addPro">添加</el-button>
          </div>
          <el-table :data="disposalData.proList" border stripe class="mt10">
            <el-table-column label="序号" type="index" align="center"/>
            <el-table-column label="物品编号" align="center" prop="proNo"/>
            <el-table-column label="物品名称" align="center" prop="proName"/>
            <el-table-column label="数量" align="center" prop="disposalNumber"/>
            <el-table-column label="金额" align="center" prop="disposalAmount"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-delete" @click="deletePro(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="登记附件">
          <div class="mt10">
            <el-upload
              action="#"
              :http-request="uploadAnnex"
              :show-file-list="false"
            >
              <el-button size="small" type="primary">上传</el-button>
            </el-upload>
          </div>
          <el-table :data="disposalData.oss" border stripe class="mt10">
            <el-table-column label="序号" type="index" align="center" width="80"/>
            <el-table-column label="名称" align="center" prop="originalName"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
              <template slot-scope="scope">
                <el-button size="mini" type="text">
                  <el-link :underline="false" type="primary" :href="scope.row.url" target="_blank" icon="el-icon-view">
                    查看
                  </el-link>
                </el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteAnnex(scope.row.ossId)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <pro ref="proRef" @refresh="refresh"/>
    </div>
  </el-drawer>
</template>

<script>
import {
  deleteAnnex, deletePro,
  disposalRegisteredInfo,
  updateInfo,
  uploadAnnex
} from '@/api/sacw/dispose'
import CustomizeDisposalForm from '@/views/wms/deal/register/form/customizeDisposalForm'
import Pro from './pro'

export default {
  components: { CustomizeDisposalForm, Pro },
  dicts: ['deal_type'],
  data() {
    return {
      showDetail: false,
      activeName: undefined,
      disposalData: undefined
    }
  },
  methods: {
    open(id) {
      this.activeName = '0'
      this.getDisposalRegisteredInfo(id)
    },
    getDisposalRegisteredInfo(id) {
      disposalRegisteredInfo(id).then((res) => {
        this.disposalData = res.data
        this.showDetail = true
      })
    },
    uploadAnnex(options) {
      const formData = new FormData()
      formData.append('file', options.file)
      formData.append('objid', this.disposalData.disposalInfo.id)
      this.$modal.loading('上传中....')
      uploadAnnex(formData).then(() => {
        this.$modal.msgSuccess('上传成功')
        this.refresh()
      }).finally(() => {
        this.$modal.closeLoading()
      })
    },
    addPro() {
      const { id, disposalStat } = this.disposalData.disposalInfo
      this.$refs.proRef.open(disposalStat, id)
    },
    deleteAnnex(id) {
      this.$modal.confirm('是否确认删除？').then(() => {
        this.$modal.loading('删除中....')
        deleteAnnex(id).then(() => {
          this.$modal.msgSuccess('删除成功')
          this.refresh()
        }).finally(() => {
          this.$modal.closeLoading()
        })
      })
    },
    deletePro(id) {
      this.$modal.confirm('是否确认删除？').then(() => {
        this.$modal.loading('删除中....')
        deletePro(id).then(() => {
          this.$modal.msgSuccess('删除成功')
          this.refresh()
        }).finally(() => {
          this.$modal.closeLoading()
        })
      })
    },
    updateInfo() {
      const disposalInfo = this.disposalData.disposalInfo
      this.$modal.loading('更新中....')
      updateInfo(disposalInfo).then(() => {
        this.$modal.msgSuccess('更新成功')
        this.getDisposalRegisteredInfo(disposalInfo.id)
      }).finally(() => {
        this.$modal.closeLoading()
      })
    },
    refresh() {
      this.getDisposalRegisteredInfo(this.disposalData.disposalInfo.id)
    }
  }
}
</script>
